<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>需求管理</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/js/jquery-3.5.1.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/index/js/indexContent.js"></script>
    <style>
        .layui-input-block {
            margin-left: 62px;
        }
         .layui-table-tool{
             background-color: rgb(199 189 189 / 23%);
         }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md8" style="padding-top: 12px;">
<!--            <span class="layui-breadcrumb" lay-separator="→" style="display: block;font-size: 20px;">-->
<!--                <a href="/indexContent/one">首页</a>-->
<!--            </span>-->
        </div>
        <div class="layui-col-md4">
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;float:right"
               href="javascript:location.replace(location.href);" title="刷新">
                <i class="layui-icon layui-icon-refresh
" style="line-height:30px"></i></a>
        </div>
    </div>
</div>
<div class="layui-container">
    <form class="layui-form" action="" id="addDemandForm">
        <div class="layui-row">
            <div class="layui-col-md3" style="width: 24%">
                <label class="layui-form-label" style="width: 35px;padding: 9px 13px;">项目:</label>
                <div class="layui-input-block">
                    <select name="projectName" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option th:each="list:${listProject}" th:value="${list.getProjectName()}"
                                th:text="${list.getProjectName()}"></option>
                    </select>
                    <!---->
                </div>
            </div>
            <div class="layui-col-md6" style="width: 42%;">
                <label class="layui-form-label" style="width: 60px">需求日期:</label>
                <div class="layui-inline" id="test6">
                    <div class="layui-input-inline" style="float: left;">
                        <input type="text" name="startTime" autocomplete="off" id="startTime" class="layui-input"

                               placeholder="开始日期">
                    </div>
                    <div class="layui-form-mid" style="margin: 0 10px;">-</div>
                    <div class="layui-input-inline" style="float: left;">
                        <input type="text" name="endTime" autocomplete="off" id="endTime" class="layui-input"
                               placeholder="结束日期">
                    </div>
                </div>
            </div>
            <div class="layui-col-md2" style="width: 24%">
                <label class="layui-form-label" style="width: 32px">标签:</label>
                <div class="layui-input-block">
                    <select name="labelOption" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option th:each="label:${labelList}" th:value="${label.getLabelName()}"
                                th:text="${label.getLabelName()}"></option>
                    </select>
                    <!---->
                </div>
            </div>
            <div class="layui-col-md1">
                <div class="layui-input-block" style="margin-left: 10px">
                    <button type="submit" style="width: 100%" class="layui-btn" lay-submit="" lay-filter="demo1"
                            data-type="reload">
                        <i class="layui-icon layui-icon-search"></i>搜索
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="layui-fluid" style="margin-top: 20px">
    <div class="layui-row">
        <table class="layui-hide" id="table" lay-filter="table"></table>
    </div>
</div>
<script type="text/html" id="usernameTpl">
    <a href="/indexContent/two?projectName={{d.project_name}}" id="test111" class="layui-table-link">{{ d.project_name
        }}</a>
</script>
<script>
    layui.use(['form', "table", 'layer', 'util', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            util = layui.util,
            laydate = layui.laydate;
        //日期范围
        laydate.render({
            elem: '#test6',
            //设置开始日期、日期日期的 input 选择器
            //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
            range: ['#startTime', '#endTime'],
            max: maxDate()
        });
        //固定块
        util.fixbar({
            css: {right: 50, bottom: 100}
            , bgcolor: '#393D49'
            , click: function (type) {
                console.log(type);
                if (type === 'top') {
                    layer.msg('返回顶部')
                }
            }
        })

        // 设置最大可选的日期
        function maxDate() {
            var now = new Date();
            return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
        }

        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#table'
                , url: 'getOneList'
                , method: 'GET'
                , title: '主页面第一页'
                , toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
                text: {
                    none: '暂无相关数据' //默认：无数据。
                }
                , limit: 15
                , limits: [15, 30, 45, 60, 75, 90]
                , loading: true //是否开始加载条
                , even: true, //开启隔行背景#
                skin: 'line', //行边框风格
                id: "testReload",
                cols:
                    [
                        [
                            // {type: 'checkbox', fixed: 'left'},
                            {field: 'id', title: 'ID', fixed: 'left', unresize: true, sort: true},
                            {field: 'project_name', title: '项目名', templet: '#usernameTpl'},
                            {field: 'project_info', title: '项目概述'},
                            {field: 'sum_demand_time', title: '需求日期', sort: true},
                            {field: 'sum_demand_label', title: '需求标签'},
                            // {field: 'create_time', title: '创建时间', sort: true},
                        ]
                    ],
                page: true
            });
        })

        //监听提交
        form.on('submit(demo1)', function (data) {
            let form_data = data.field;
            if (form_data.projectName == '' && form_data.endTime == '' && form_data.startTime == ''
                && form_data.labelOption == '') {
                layer.msg("至少选择一个条件")
            } else if (form_data.endTime != '' && form_data.startTime == '' ||
                form_data.endTime == '' && form_data.startTime != '') {
                layer.msg("请选择开始时间和结束时间")
            } else {
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        startTime: form_data.startTime,
                        endTime: form_data.endTime,
                        labelOption: form_data.labelOption,
                        projectName: form_data.projectName,
                    }
                }, 'data');
                return false;
            }
            return false;
        });
    })
</script>

</body>
</html>